<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>单个视频</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="../../../css/mui.css" rel="stylesheet"/>
	<link href="../../../css/mui.min.css" rel="stylesheet"/>
	<link href="../../../css/mui-icons-extra.css" rel="stylesheet"/>
	<link href="../../../css/app.css" rel="stylesheet"/>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- 头部HEADER -->
	<header class="mui-bar mui-bar-nav">
		<span class="mui-icon mui-icon-back" 
			onclick="jumpToMyZanList()"></span>
		<h1 class="mui-title" id="vTitle">单个视频</h1>
	</header>
	<br>
	<!-- 头部HEADER -->
	
	<div style="height: 25px;"></div>
	<!-- 视频布局 -->
	<div class="app-video-bg" id="refresh">
	</div>
	<!-- 视频布局 -->
	<!-- 表单 -->
	<div id="plusOutForm">
		<p class="close" onclick="getPlusHide()">
			<span class="mui-icon mui-icon-arrowdown"></span>
		</p>
		<div class="plusForm">
			<p class="plusMsg">
				更新说明：
				上传或者拍摄您的15秒素材一个，
				将替换视频中的素材：<br>
				&nbsp; 1）中间圆以内的视频；<br>
				&nbsp; 2）圆外面3个圆环动态图；
			</p>
			<hr>
			<p class="plusMsg">
				<span class="app-plus-text">点击更新素材</span>
				<span class="mui-icon mui-icon-plus app-plus-icon"></span>
				<input type="file" id="file" style="display: none;"/>
			</p>
			<hr>
			<p class="plusMsg">
				更新示例【下面图示】：<br>
				<span id="case">
					<img src="../../../imgs/tmp.png" width="100%">
				</span>
			</p>
			<div style="height: 180px;"></div>
		</div>
	</div>	 -->
	<!-- 表单
	<br><br>
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" onclick="jumpToIndex()">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">库</span>
		</a>
<!-- 		<a class="mui-tab-item" onclick="jumpToChat()">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a> -->
		<a class="mui-tab-item mui-active" onclick="jumpToMy()">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>


<script src="../../../js/mui.js"></script>
<script src="../../../js/app.js"></script>
<script type="text/javascript">
	var vid = getUrlParam('vid');
	//自动加载
	(function($, owner) {
		getPlusHide(); //隐藏创作表单
		getIndex(); 
	}(mui, window.app = {}));
	// 隐藏创作表单
	function getPlusHide(){
		document.getElementById('plusOutForm').classList.add('mui-hidden');
	}
	//获取列表
	function getIndex(){
		//屏幕宽度
		var cw = document.documentElement.clientWidth; 
		// //屏幕高度
		// var ch = document.documentElement.clientHeight; 
		var resList = getMarketCache(); //首页缓存
		var list = resList.list;
		if (list.length==0) {
			mui.toast('没有数据',{ 
				duration:'long', type:'div',
			});
			setTimeout(function(){
				mui.back();
			}, 2000);
			return
		}
		var h = '';
		var vs = list;
		var videoId = 0; //去重用
		for (var i=0;i<vs.length;i++) {
			if (vs[i].videoId==vid && videoId!=vid) {
				var vHeight = Math.round(cw * vs[i].videoRatio);
				//显示有限字数
				var vTitle = getStrLimitNum(vs[i].videoTitle, 15); 
				h += '<div class="app-video" style="height:'+vHeight+'px;">';
				h += '<video poster="'+vs[i].videoImg+'" src="'+vs[i].videoLink+'" type="video/mp4" name="media" height="'+vHeight+'" controls="controls" autoplay="autoplay" loop class="app-video-tag"></video>';
				h += '<div class="app-video-title app-shadow">'+vTitle+'</div>';
				h += '<div class="app-video-menu" onclick="getPlusShow()">';
				h += '<div style="height:30px;"></div>';
				h += '<span class="mui-icon mui-icon-compose app-heart-light app-shadow" style="font-size:40px;"></span>';
				h += '<div class="app-heart-light app-shadow">创作<br>编辑</div>';
				h += '</div>';
				h += '</div>';
				videoId = vid;
				mui("#vTitle")[0].innerHTML = '创作<span class="mui-icon mui-icon-download"></span>'+vTitle;
			}
		}
		if (h=='') {
			mui.toast('没有数据',{ 
				duration:'long', type:'div',
			});
			setTimeout(function(){
				mui.back();
			}, 2000);
			return
		}
		mui("#refresh")[0].innerHTML = h;
	}
	//获取库数据缓存
	function getMarketCache(){
		var resList = cacheGet(marketList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = ''; //ID字符串集合
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				ids: idstring
			};
		}
		return resList;
	}
	// 显示创作编辑表单
	function getPlusShow(){
		document.getElementById('plusOutForm').classList.remove('mui-hidden');
	}
</script>